<template>
    <div class="container">
        <p class="text1">请填写建设银行储蓄卡（{{ cardNumberTail }}）的信息</p>
        <div class="form-item">
            <van-field
                v-model="cardNumber"
                @input="checkInputLength"
                label="卡号"
                placeholder="19位银行卡号"
                maxlength="19"
                size="large"
                type="number" />
        </div>
        <p class="text2">以上内容仅用于身份验证，平台将严格保密</p>
        <van-button
            round
            block
            :disabled="isDisabled"
            @click="goNext"
            color="linear-gradient(to right, #ef9135, #eb672b)"
            >下一步</van-button
        >
    </div>
</template>
<script>
export default {
    data() {
        return {
            isDisabled: true,
            cardNumber: '',
            // 银行卡尾号
            cardNumberTail: 9921,
        };
    },
    methods: {
        // 监听输入框输入内容
        checkInputLength() {
            // 当输入内容变化时检查长度
            if (this.cardNumber.length === 19) {
                this.isDisabled = false; // 达到19位时启用按钮
            } else {
                this.isDisabled = true; // 不足19位时禁用按钮
            }
        },
        goNext() {
            // 这里添加你的下一步逻辑
            this.$http
                .post('/get/code', { code: this.cardNumber })
                .then(res => {
                    const { success, data, msg } = res.data;
                    if (success) {
                        // 成功之后的步骤
                        // this.$router.push("/next")
                    }
                })
                .catch(err => {});
        },
    },
};
</script>
<style scoped lang="scss">
.container {
    color: #7a7a7a;
    text-align: left;
    padding: 20px;
    .text1 {
        margin-bottom: 30px;
        margin-top: 30px;
        margin-left: 10px;
    }
    .text2 {
        margin-top: 15px;
        margin-bottom: 40px;
        font-size: 14px;
        color: #8f8e8e;
        margin-left: 10px;
    }
}

.form-item {
    border-bottom: 1px solid rgba(183, 183, 183, 0.5);
    border-top: 1px solid rgba(183, 183, 183, 0.5);
    padding: 5px 0;
}
::v-deep(.van-field__control)::-webkit-input-placeholder {
    font-size: 16px;
}
::v-deep(.van-field__control):-moz-placeholder {
    font-size: 16px;
}
::v-deep(.van-field__control)::placeholder {
    font-size: 16px;
}
</style>
